*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
        '微软雅黑', Arial, sans-serif;
    font-weight: 400;
    font-size: $--font-size-base;
    color: $--color-black;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

textarea {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
        '微软雅黑', Arial, sans-serif;
}

a {
    color: $--color-primary;
    text-decoration: none;

    &:hover,
    &:focus {
        color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
    }

    &:active {
        color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    }
}

h1 {
    font-size: #{$--font-size-base + 6px};
}

h2 {
    font-size: #{$--font-size-base + 4px};
}

h3 {
    font-size: #{$--font-size-base + 2px};
}

h4,
h5,
h6,
p {
    font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: $--color-text-regular;
    font-weight: inherit;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

p {
    line-height: 1.8;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

sup,
sub {
    font-size: #{$--font-size-base - 1px};
}

small {
    font-size: #{$--font-size-base - 2px};
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

table {
    border-collapse: collapse;
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸  chrome*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;

    /*定义滚动条轨道 圆角*/
    &-track {
        border-radius: 10px;
    }

    /*定义滑块 背景色+圆角*/
    &-thumb {
        border-radius: 10px;
        background-color: $--color-primary-light-8;
    }
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸  Firefox*/
/*  
     说明：
         scrollbar-color: color1 color2;       color1 -> 滚动条颜色； color2 -> 滚动轨道颜色； 
         scrollbar-width: thin; 
             取值：
                 1、auto;     系统默认的滚动条宽度
                 2、thin;     系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度
                 3、none;     不显示滚动条，但是该元素依然可以滚动
 */
html {
    &,
    * {
        scrollbar-color: $--color-primary-light-8 $--background-color-base;
        scrollbar-width: thin;
    }
}
